<template>
	<view class="topup">
		<view class="topBox">
			<view class="title" v-if="nickname">{{ nickname }}</view>
			<view class="textBox mTop2">
				<view class="text">{{ info.set_anme }}</view>
			</view>
		</view>

		<view class="formBox mTop4">
			<view class="item"><input class="input" type="text" v-model="form.name" :disabled="closeEdit" placeholder="请输入姓名" placeholder-class="placeholderClase" /></view>
			<view class="item mTop2">
				<input class="input" type="number" v-model="form.tel" :disabled="closeEdit" placeholder="请输入充值号码" placeholder-class="placeholderClase" />
			</view>
		</view>
		<view class="bottomBox mTop4">
			<button class="btn" type="default" hover-class="none" v-if="info.set_type == 1" @click="PayEvent()">确认支付</button>
			<button class="btn" type="default" hover-class="none" v-else @click="PayEvent()">下一步</button>
		</view>
		<view class="explanation mTop3">
			<view class="title">套餐名称</view>
			<view class="text mTop1"><mp-html :content="info.set_name" :tag-style="tagStyle"></mp-html></view>
		</view>
		<view class="explanation mTop3">
			<view class="title">活动介绍</view>
			<view class="text mTop1"><mp-html :content="info.set_des" :tag-style="tagStyle"></mp-html></view>
		</view>
		<view class="explanation mTop3">
			<view class="title">请认真阅读以下信息后再充值:</view>
			<view class="text mTop1"><mp-html :content="info.set_content" :tag-style="tagStyle"></mp-html></view>
		</view>
	</view>
</template>

<script>
var util = require('../../common/util.js');
var jweixin = require('../../common/wxsdk.js');
export default {
	data() {
		return {
			form: {
				name: '',
				tel: ''
			},
			nickname: '',
			set_id: 0,
			closeEdit: false,
			info: [],
			tagStyle: {
				p: 'font-size: 28rpx;'
			}
		};
	},
	onLoad(options) {
		if (options.set_id) {
			this.set_id = options.set_id;
		}
		this.getPreferential();
	},
	methods: {
		radioChange(item) {
			this.radio = item;
		},
		PayEvent() {
			let that = this;
			util.requestPost(
				'index/preferentialPay',
				{ set_id: that.set_id, form: JSON.stringify(this.form) },
				res => {
					if (res.code == 1 && that.info.set_type == 1) {
						jweixin.config({
							debug: false,
							appId: res.data.list.appId, // 必填，公众号的唯一标识
							timestamp: res.data.list.timeStamp, // 必填，生成签名的时间戳
							nonceStr: res.data.list.nonceStr, // 必填，生成签名的随机串
							signature: res.data.list.paySign, // 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						});

						jweixin.ready(function() {
							jweixin.chooseWXPay({
								timestamp: res.data.list.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: res.data.list.nonceStr, // 支付签名随机串，不长于 32 位
								package: res.data.list.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
								signType: res.data.list.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
								paySign: res.data.list.paySign, // 支付签名
								success: function(res) {
									// 支付成功后的回调函数
									that.$toast('支付成功');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/my/recharge',
											fail(err) {
												uni.showToast({
													title: `跳转失败：${JSON.stringify(err)}`,
													icon: 'none'
												});
											}
										});
									}, 500);
								},
								fail(err) {
									that.$toast('支付失败', JSON.stringify(err));
								}
							});
						});
						jweixin.error(function(res) {
							that.$toast('请刷新重试');
						});
					} else {
						that.$toast(res.msg);
					}
				},
				err => {
					console.log(err);
				},
				{ isShowLoading: false }
			);
		},

		getPreferential() {
			util.requestPost(
				'index/getPreferentialInfo',
				{ set_id: this.set_id },
				res => {
					if (res.code == 1) {
						this.info = res.data.list;
						this.nickname = res.data.nickname;
					} else {
					}
				},
				err => {
					console.log(err);
				},
				{ isShowLoading: false }
			);
		}
	}
};
</script>

<style scoped lang="scss">
.topup {
	padding: 20rpx;
	.topBox {
		color: #ffffff;
		padding: 20rpx;
		text-align: center;
		border-radius: 20rpx;
		background: $btn-bg-color;
		.textBox {
			.text {
				font-size: 26rpx;
			}
		}
	}
	.formBox {
		.item {
			border: $border-base;
			.input {
				padding: 0 20rpx;
				height: 66rpx;
				font-size: 28rpx;
			}
			.placeholderClase {
				font-size: 24rpx;
			}
		}
	}
	.explanation {
		font-size: 24rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		border: 1rpx dashed #999;
		.title {
			font-size: 26rpx;
			color: $primary-color;
		}
	}
	.bottomBox {
		.btn {
			color: #ffffff;
			font-size: 28rpx;
			line-height: 76rpx;
			border-radius: 20rpx;
			background: $btn-bg-color;
			&::after {
				border: none;
			}
		}
	}
}
</style>
